<script setup lang="ts">
import type { Ref } from 'vue'
import type { EChartsOption } from 'echarts'
import { onMounted, ref, watch } from 'vue'
import { useECharts } from '@/hooks/useECharts'
import { storeToRefs } from 'pinia'
import { useTagsViewRoutes } from '@/stores/tagsViewRoutes'
import { useThemeConfig } from '@/stores/themeConfig'

const { isTagViewCurrenFull } = storeToRefs(useTagsViewRoutes())

// 统计图
const chartRef = ref<HTMLDivElement | null>(null)
const { setOptions, resize } = useECharts(chartRef as Ref<HTMLDivElement>)

const { themeConfig } = useThemeConfig()

watch(
  () => isTagViewCurrenFull.value,
  () => {
    setTimeout(resize, 300)
  }
)

onMounted(() => {
  const getName = ['房屋及结构物', '专用设备', '通用设备', '文物和陈列品', '图书、档案']
  const getValue = [34.2, 38.87, 17.88, 9.05, 2.05]
  const data = []
  for (let i = 0; i < getName.length; i++) {
    data.push({ name: getName[i], value: getValue[i] })
  }
  const colorList = ['#51A3FC', '#36C78B', '#FEC279', '#968AF5', '#E790E8']
  const option: EChartsOption = {
    title: {
      text: '房屋建筑工程',
      textStyle: { fontSize: 15 }
    },
    tooltip: { trigger: 'item', formatter: '{b} <br/> {c}%' },
    graphic: {
      elements: [
        {
          type: 'image',
          z: -1,
          style: {
            image: themeConfig.isIsDark
              ? ''
              : '',
            width: 230,
            height: 230
          },
          left: '16.5%',
          top: 'center'
        }
      ]
    },
    legend: {
      type: 'scroll',
      orient: 'vertical',
      right: '0%',
      left: '65%',
      top: 'center',
      itemWidth: 14,
      itemHeight: 14,
      data: getName,
      textStyle: {
        rich: {
          name: {
            fontSize: 14,
            fontWeight: 400,
            width: 200,
            height: 35,
            padding: [0, 0, 0, 60]
          },
          rate: {
            fontSize: 15,
            fontWeight: 500,
            height: 35,
            width: 40,
            padding: [0, 0, 0, 30]
          }
        }
      }
    },
    series: [
      {
        type: 'pie',
        radius: ['70', themeConfig.isIsDark ? '50' : '102'],
        center: ['32%', '50%'],
        itemStyle: {
          color: function (params: any) {
            return colorList[params.dataIndex]
          }
        },
        label: { show: false },
        labelLine: { show: false },
        data: data
      }
    ]
  }
  setOptions(option)
})
</script>

<template>
  <div style="height: 100%" ref="chartRef"></div>
</template>
